<!DOCTYPE html>
<html lang="CH-zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一零九在线弹幕</title>

    <link rel="stylesheet" href="gundongwen.css">
    <style>
        .music {
            float: left;
            margin-left: 40px;
            margin-top: 10px;
        }
        .music audio {
            float: left;
            height: 40px;
            width: 270px;
        }
        
        .fangwen h1{
            margin-top: 10px;
            float: left;
        }
    </style>
</head>
<body>

    <div class="fangwen">
        <h1>一零九</h1>
    <ul>
        <li><h6>重复滚动</h6><input id="loop" type="text" value="5"></li>
        <li><h6>速度Max</h6><input id="speed_max" type="text" value="100"></li>
        <li><h6>速度Min</h6><input id="speed_min" type="text" value="10"></li>
        <li><h6>字体Max</h6><input id="font_max" type="text" value="150"></li>
        <li><h6>字体Min</h6><input id="font_min" type="text" value="30"></li>
        <li><h6>频次出现</h6><input id="pinci" type="text" value="20"></li>
        <li><h6>方向:</h6><button class="dic_zuo">左</button> <button class="dic_you">右</button></li>
    </ul>
    <!-- <a href="login.html">联机弹幕</a> -->
    <div class="music">
        <audio controls autoplay id="myAudio">
            <source src="Athree_COCA-COLA.mp3" type="audio/mpeg">
            音乐
          </audio>
    </div>
    </div>
    <div class="yici"><marquee loop=1  scrollamount=50 >欢迎来到一零九打卡点！</marquee></div>
    <div class="gundong_box">

    </div>
    <div class="input_box">
        <input type="text">
        <button>弹幕</button>
    </div>

    <script>
        // 获取盒子
        const box = document.querySelector(".gundong_box")
        // 获取提交按钮
        const btn = document.querySelector(".input_box button")
        // 获取输入栏
        const tx = document.querySelector(".input_box input")

        // 获取滚动元素
        const gundong_loop = document.querySelector("#loop")
        // 速度最大最小
        let speed_max = document.querySelector("#speed_max")
        let speed_min = document.querySelector("#speed_min")
        // 按钮左右方向
        const btn_zuo = document.querySelector(".dic_zuo")
        const btn_you = document.querySelector(".dic_you")
        // 字体最大最小
        let font_max = document.querySelector("#font_max")
        let font_min = document.querySelector("#font_min")

        // 频次出现
        const pinci = document.querySelector("#pinci")

        // 重复次数
        let loop = 1
        // 方向
        let dic = "left"

        // 左边方向调用按钮
        btn_zuo.addEventListener("click",function(){
            dic = "left"
        })
        
        // 有边方向调用按钮
        btn_you.addEventListener("click",function(){
            dic = "right"
        })

        // 随机整数函数
        function getRandomInt(N,M){
                return Math.floor(Math.random() * ( M - N + 1)) + N
                }

        // 随机颜色函数
        function randomColor(){
            let r = Math.floor(Math.random() * 256)
            let g = Math.floor(Math.random() * 256)
            let b = Math.floor(Math.random() * 256)
            return `rgb(${r},${g},${b})`
        }
        
        // 发送弹幕按钮调用
        function fasong(){
            if (tx.value != ""){
            loop = gundong_loop.value
            let random_speed = getRandomInt(parseInt(speed_min.value),parseInt(speed_max.value))
            let random_font_size = getRandomInt(parseInt(font_min.value),parseInt(font_max.value))
            let random_top = getRandomInt(7,75)
            let random_Color = randomColor()
            let htmlFragment=`<marquee class="gundongwen" direction=${dic}  scrollamount=${random_speed}  loop=${loop} style="color: ${random_Color}; top:${random_top}%;">${tx.value.trim()}</marquee>`
		    let addLi=document.createElement('div')

            addLi.style.position="absolute"
            addLi.style.width = "1400px"
            addLi.style = `font-size:${random_font_size}px`
            addLi.innerHTML=htmlFragment
		    box.appendChild(addLi)
            tx.value = ""
            }
            
            // 弹幕数量控制
            const boxs = document.querySelectorAll(".gundong_box div")
            for (let i=0;i<=boxs.length;i++){
                if (i>=parseInt(pinci.value)){
                    boxs[i-parseInt(pinci.value)].parentNode.removeChild(boxs[i-parseInt(pinci.value)])

                }
            }
        }

        // 调用键盘Enter键来实现发送
        btn.addEventListener("click",fasong)
        tx.addEventListener("keyup",function(e){
            if (e.key === "Enter"){
            fasong()
            }
        })

        
    

    </script> 
</body>
</html>